<template>
  <div class="course-card" @click="clickCard()">
    <div id="wrap">
      <div class="banner"></div>
    </div>
    <div class="title">{{taskInfo && taskInfo.title}}</div>
    <div class="author">
      <span>描述：</span>
      {{taskInfo && taskInfo.discribe}}
    </div>
    <div @click.stop="explore">
      <div class="discribe" id="explore">
        <span>已提交</span>
        10/55
        <i class="el-icon-search"></i>
      </div>
    </div>
    <div class="time">{{taskInfo && taskInfo.modifiedTime}}</div>
    <div @click.stop v-if="this.$store.state.user.type == '2'" class="operation">
      <el-button @click.stop="update()" type="primary" icon="el-icon-edit" circle></el-button>
      <el-popconfirm
        confirm-button-text="是的"
        cancel-button-text="点错了"
        icon="el-icon-delete"
        confirm-button-type="danger"
        cancel-button-type="disabled"
        icon-color="red"
        title="您确定删除该作业吗？"
        @confirm="deleteTask()"
      >
        <el-button
          style="margin-left:15px"
          slot="reference"
          type="danger"
          icon="el-icon-delete"
          circle
        ></el-button>
      </el-popconfirm>
    </div>
  </div>
</template>

<script>
import { deleteById } from "@/api/task";
export default {
  props: ["taskInfo"],
  name: "CourseCard",
  methods: {
    update() {
      this.$router.push({
        path: "task_update",
        query: { id: this.taskInfo.id }
      });
    },
    async deleteTask() {
      const { data: res } = await deleteById(this.taskInfo.id);
      if (res.code == 20000) {
        await this.$emit("reload");
        this.$notify.success({ title: "操作成功", message: res.message });
      } else {
        this.$message.error(res.message);
      }
    },
    clickCard() {
      this.$router.push({
        path: "task_update",
        query: { id: this.taskInfo.id }
      });
      this.$router.push({
        path: "task_explorer",
        query: { id: this.taskInfo.id }
      });
    },
    explore() {
      this.$router.push({
        path: "task_post_list",
        query: {
          taskInfoId: this.taskInfo.id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.course-card {
  margin-right: 18px;
  margin-left: 18px;
  margin-bottom: 50px;
  float: left;
  width: 360px;
  height: 260px;
  border-radius: 4px;
  overflow: hidden;
  background: #3a3a3d;
  position: relative;
  cursor: pointer;
  #wrap {
    max-height: 100px;
    overflow: hidden;
    .banner {
      height: 100px;
      background: url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3995543628,1724060080&fm=26&gp=0.jpg")
        center bottom -45px no-repeat/cover;
      &:hover {
        transform: scale(1.2);
        transition: all 0.5s;
      }
    }
  }
  .title {
    font-weight: 500;
    font-size: 20px;
    line-height: 21px;
    text-align: left;
    color: #ffffff;
    margin: 5px 10px 15px;
    padding-top: 6px;
  }
  #explore:hover {
    color: rgb(255, 208, 75);
  }
  .author,
  .discribe {
    font-size: 15px;
    line-height: 18px;
    text-align: left;
    color: #ffffff;
    margin: 0 10px;
    padding-top: 3px;
    > span {
      color: rgba(#ffffff, 0.4);
    }
  }
  .time {
    text-align: right;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #44d7b6;
    position: absolute;
    left: 15px;
    bottom: 10px;
  }
  .operation {
    position: absolute;
    right: 15px;
    bottom: 10px;
  }
}
</style>
